<template>
  <view class="terminal-state">
    <u-toast ref="uToast"></u-toast>
    <u-no-network></u-no-network>
    <u-navbar title="终端状态">
      <view class="u-m-r-20" slot="right" @click="triggleDrop()"> 筛选 </view>
    </u-navbar>
    <view class="flex terminal-state__header">
      <u-search
        placeholder="请输入终端或机器sn号"
        v-model="merchantNo"
        shape="square"
        bg-color="#f6f6f6"
        :show-action="false"
        @search="scanCodeFn"
        @focus="handlerFocus"
        :focus="focusShow"
      ></u-search>
      <u-image
        class="u-margin-left-10"
        width="60rpx"
        height="60rpx"
        :src="src"
        @click="scanCodeFn"
      ></u-image>
    </view>
    <!-- 机具状态 1-未绑定 2-已绑定 status-->
    <!-- hardwareType 2 传统POS 1 电签POS-->
    <!-- activeStatus 1 已激活 -->
    <scroll-view
      class="home__grid-group mt-20"
      scroll-y
      @scrolltolower="onScrolltolower"
    >
      <view>
        <view
          class="terminal-state__item"
          v-for="(item, index) in terminalList"
          :key="index"
          @click="goStateDetail(item)"
        >
          <view class="flex">
            <u-image
              :src="thumb"
              width="40"
              height="40"
              class="card__icon mr-10"
            ></u-image>
            <view class=""> 终端SN：{{ item.sn }} </view>
          </view>
          <view class="flex u-margin-top-20">
            <view class=""> 活动类型: </view>
            <view class="">
              {{ item.policyName }}
            </view>
          </view>
          <view
            class="flex u-margin-top-10 u-font-13 u-tips-color"
            v-if="item.status == '2'"
          >
            <view class=""> {{ item.merSubName }}: </view>
            <view class="u-margin-left-20"> ({{ item.merchantNo }}) </view>
          </view>
          <view class="flex u-margin-top-10">
            <view class=""> 状态： </view>
            <view class="yellow" v-if="item.status == '1'"> 未绑定 </view>
            <view class="price-text" v-else> 已绑定 </view>
          </view>

          <view class="flex u-margin-top-10">
            <view class=""> 终端类型： </view>
            <view class="" v-if="item.hardwareType == '1'"> 电签POS </view>
            <view class="" v-else> 传统pos </view>
          </view>
          <view class="flex u-margin-top-10">
            <view class=""> 激活状态： </view>
            <view class="" v-if="item.activeStatus == '1'"> 已激活 </view>
            <view class="" v-else> 未激活 </view>
          </view>
        </view>
        <u-loadmore :status="status" />
      </view>
    </scroll-view>
    <u-popup v-model="showPopup" mode="top" class="pop_filter">
      <view class="pop_content">
        <view class="pop_filter__title u-margin-left-20"> 绑定状态 </view>
        <view class="flex u-margin-top-20 u-margin-bottom-20">
          <view
            class="pop_filter__btn"
            :class="{ pop_filter__select: checked === index }"
            v-for="(item, index) in bindStates"
            :key="index"
            @click="selectBtn('1', index)"
          >
            {{ item.label }}
          </view>
        </view>
        <view class="pop_filter__title u-margin-left-20"> 设备类型 </view>
        <view class="flex u-margin-top-20 u-margin-bottom-20">
          <view
            class="pop_filter__btn"
            v-for="(item, index) in typeFilter"
            :key="index"
            :class="{ pop_filter__select: typeChecked === index }"
            @click="selectBtn('2', index)"
          >
            {{ item.label }}
          </view>
        </view>
        <view class="pop_filter__title u-margin-left-20"> 激活状态 </view>
        <view class="flex u-margin-top-20 u-margin-bottom-20">
          <view
            class="pop_filter__btn"
            v-for="(item, index) in activeStates"
            :key="index"
            :class="{ pop_filter__select: activeChecked === index }"
            @click="selectBtn('3', index)"
          >
            {{ item.label }}
          </view>
        </view>

        <view class="flex u-margin-20 u-padding-top-20">
          <u-button
            type="primary"
            class="flex-1 u-m-r-15"
            :custom-style="customCancelStyle"
            hover-class="false"
            @click="cancel()"
            >重置</u-button
          >
          <u-button
            type="primary"
            class="flex-1 u-margin-left-15"
            :custom-style="customSubmitStyle"
            hover-class="false"
            @click="submitFilter()"
            >确定</u-button
          >
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      checked: null,
      activeChecked: null,
      typeChecked: null,
      customCancelStyle: {
        // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        backgroundColor: '#f6f6f6',
        color: 'black',
      },
      customSubmitStyle: {
        // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        backgroundColor: '#9D60FF',
        color: 'white',
      },
      src: '/static/image/home/icon_scan.png',
      thumb: '/static/image/home/icon_terminal_status.png',
      pageNo: 1,
      pageSize: '10',
      requstBody: {
        status: '', //绑定状态
        deviceType: '', //类型
        activeStatus: '', //激活状态
        beginSn: '',
      },
      terminalList: [],
      merchantNo: '',
      scrollTop: 0,
      status: 'loadmore',
      showPopup: false,
      bindStates: [
        {
          label: '全部',
          value: '',
        },
        {
          label: '已绑定',
          value: '2',
        },
        {
          label: '未绑定',
          value: '1',
        },
      ],
      typeFilter: [
        {
          label: '全部',
          value: '',
        },
        {
          label: '电签pos',
          value: '2',
        },
        {
          label: '传统pos',
          value: '1',
        },
      ],
      activeStates: [
        {
          label: '全部',
          value: '',
        },
        {
          label: '未激活',
          value: '0',
        },
        {
          label: '已激活',
          value: '1',
        },
      ],
      focusShow: false, // 输入框焦点
      scanResult: '', // 摄像头扫一扫
    };
  },
  onReachBottom() {
    this.onScrolltolower();
  },
  mounted() {
    this.terminalInfoList();
  },
  methods: {
    selectBtn(type, index) {
      if (type == '1') {
        this.checked = index;
      } else if (type == '2') {
        this.typeChecked = index;
      } else {
        this.activeChecked = index;
      }
    },
    cancel() {
      const _that = this;
      _that.requstBody.status = '';
      _that.requstBody.deviceType = '';
      _that.requstBody.activeStatus = '';
      _that.typeChecked = null;
      _that.checked = null;
      _that.activeChecked = null;
    },
    submitFilter() {
      const _that = this;
      if (_that.checked) {
        _that.requstBody.status = _that.bindStates[_that.checked].value;
      }
      if (_that.activeChecked) {
        _that.requstBody.activeStatus =
          _that.activeStates[_that.activeChecked].value;
      }
      if (_that.typeChecked) {
        _that.requstBody.deviceType = _that.typeFilter[_that.typeChecked].value;
      }
      _that.pageNo = 1;
      _that.terminalList = [];
      _that.showPopup = false;
      _that.terminalInfoList();
    },
    triggleDrop() {
      this.showPopup = !this.showPopup;
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    onScrolltolower() {
      this.status = 'loading';
      this.terminalInfoList();
    },
    terminalInfoList() {
      let _that = this;
      _that.$zx.terminal_api
        .terminalInfoList(this.pageNo, this.pageSize, this.requstBody)
        .then((data) => {
          _that.terminalList = _that.terminalList.concat(data);
          // console.log("data=" + JSON.stringify(_that.terminalList))
          if (data.length !== 0) {
            this.status = 'loadmore';
            this.pageNo += 1;
          } else {
            this.status = 'nomore';
          }
        });
    },
    search(e) {
      console.log('e=' + e);
      this.requstBody.beginSn = e;
      this.pageNo = 1;
      this.terminalList = [];
      this.terminalInfoList();
    },
    goStateDetail(item) {
      let itemStr = JSON.stringify(item);
      this.$u.route('pages/main/terminal/terminalStateDetail', {
        item: encodeURIComponent(itemStr),
      });
    },
    // 调出摄像头扫一扫功能
    scanCodeFn() {
      // 除了H5端不显示
      // #ifndef H5
      console.log('除了H5端不显示----->', 123);
      uni.scanCode({
        onlyFromCamera: true, // 仅允许从相机扫码
        scanType: ['barCode', 'qrCode'], // 可以扫描条形码和二维码
        success: (res) => {
          console.log('res----->313', res);
          uni.showToast({
            title: '扫码成功',
            icon: 'success',
          });
          // 处理扫码结果，比如将扫码结果展示在页面上或进行进一步处理
          console.log('扫码结果----->319', res.result);
          // // 获取列表数据
          // this.terminalInfoList();
          // // 获取焦点
          // this.handlerFocus();
          // // 跳转到特定页面
          // uni.navigateTo({
          //   url: `/pages/main/terminal/terminalStateList?code=${res.result}`,
          // });
        },
        fail: (err) => {
          console.error('扫码失败：', err);
          uni.showToast({
            title: '扫码失败',
            icon: 'none',
          });
        },
      });
      // #endif
      // 只在H5端显示
      // #ifdef H5
      console.log('只在H5端显示----->', 123);
      // #endif
    },
    handlerFocus() {
      this.focusJJ = true;
      console.log('激活----->');
    },
  },
};
</script>

<style scoped lang="scss">
.terminal-state {
  &__header {
    padding: 20rpx;
    background-color: white;
  }

  &__item {
    background-color: white;
    border-radius: 20rpx;
    margin: 10rpx 20rpx;
    padding: 20rpx;
  }
}

.yellow {
  color: #ff8e00;
}

.pop_filter {
  position: absolute;
  .pop_content {
    // 计算状态栏的高度
    padding-top: var(--status-bar-height);
  }
  &__title {
    font-weight: bold;
    height: 60rpx;
    line-height: 60rpx;
  }

  &__btn {
    background-color: #f6f6f6;
    width: 180rpx;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    margin: 0 20rpx;
    border-radius: 10rpx;
  }

  &__input {
    background-color: #f6f6f6;
    margin: 0 20rpx;
    border-radius: 10rpx;
  }

  &__select {
    background-color: #f1e8ff;
    color: #9d60ff;
    background-image: url('../../../static/image/home/icon_filter_checked.png');
    background-position: right bottom;
    background-repeat: no-repeat;
  }
}
</style>
